<template>
  <div class="meals-container">
    <el-card class="meals-card">
      <template #header>
        <div class="card-header">
          <span>布布的营养餐点</span>
          <el-button type="primary" @click="addMeal">记录用餐</el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab" class="meal-tabs">
        <el-tab-pane label="今日餐点" name="today">
          <div class="meals-timeline">
            <el-timeline>
              <el-timeline-item
                v-for="meal in todayMeals"
                :key="meal.id"
                :timestamp="meal.time"
                :type="meal.type"
              >
                <el-card class="meal-card">
                  <div class="meal-content">
                    <div class="meal-info">
                      <h4>{{ meal.title }}</h4>
                      <p>{{ meal.description }}</p>
                      <div class="nutrition-tags">
                        <el-tag size="small" type="success">营养值: {{ meal.nutrition }}分</el-tag>
                        <el-tag size="small" type="warning">热量: {{ meal.calories }}kcal</el-tag>
                      </div>
                    </div>
                    <div class="meal-image" v-if="meal.image">
                      <el-image
                        :src="meal.image"
                        fit="cover"
                        :preview-src-list="[meal.image]"
                      />
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
        <el-tab-pane label="营养分析" name="analysis">
          <div class="nutrition-analysis">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-card class="analysis-card">
                  <template #header>
                    <div class="analysis-header">
                      <span>今日营养摄入</span>
                    </div>
                  </template>
                  <el-progress
                    type="dashboard"
                    :percentage="nutritionPercentage"
                    :color="customColors"
                  />
                  <div class="analysis-text">营养均衡度: {{ nutritionPercentage }}%</div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="analysis-card">
                  <template #header>
                    <div class="analysis-header">
                      <span>餐点分布</span>
                    </div>
                  </template>
                  <div class="meal-distribution">
                    <div class="distribution-item">
                      <span>早餐</span>
                      <el-progress :percentage="30" />
                    </div>
                    <div class="distribution-item">
                      <span>午餐</span>
                      <el-progress :percentage="40" />
                    </div>
                    <div class="distribution-item">
                      <span>晚餐</span>
                      <el-progress :percentage="30" />
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="analysis-card">
                  <template #header>
                    <div class="analysis-header">
                      <span>营养元素</span>
                    </div>
                  </template>
                  <div class="nutrition-elements">
                    <el-tag>蛋白质: 充足</el-tag>
                    <el-tag type="success">维生素: 适中</el-tag>
                    <el-tag type="warning">碳水: 适中</el-tag>
                    <el-tag type="info">矿物质: 充足</el-tag>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('today')
const nutritionPercentage = ref(85)

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]

const todayMeals = ref([
  {
    id: 1,
    title: '营养早餐',
    description: '牛奶+全麦面包+水煮蛋+水果',
    time: '08:00',
    type: 'primary',
    nutrition: 90,
    calories: 350,
    image: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif'
  },
  {
    id: 2,
    title: '健康午餐',
    description: '糙米饭+清炒时蔬+鱼肉',
    time: '12:00',
    type: 'success',
    nutrition: 95,
    calories: 450,
    image: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif'
  },
  {
    id: 3,
    title: '下午茶点',
    description: '酸奶+坚果',
    time: '15:30',
    type: 'warning',
    nutrition: 85,
    calories: 200,
    image: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif'
  }
])

const addMeal = () => {
  // 添加餐点的逻辑
}
</script>

<style scoped>
.meals-container {
  padding: 20px;
}

.meals-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meal-tabs {
  margin-top: 20px;
}

.meals-timeline {
  padding: 20px;
}

.meal-card {
  margin-bottom: 10px;
}

.meal-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.meal-info {
  flex: 1;
}

.meal-info h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.meal-info p {
  color: #666;
  margin: 5px 0;
}

.nutrition-tags {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.meal-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
}

.meal-image .el-image {
  width: 100%;
  height: 100%;
}

.nutrition-analysis {
  padding: 20px 0;
}

.analysis-card {
  text-align: center;
  height: 100%;
}

.analysis-header {
  text-align: left;
}

.analysis-text {
  margin-top: 10px;
  color: #666;
}

.meal-distribution {
  padding: 20px 0;
}

.distribution-item {
  margin-bottom: 15px;
}

.distribution-item span {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.nutrition-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
}
</style> 